<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html ng-app="kitkatApp">
  <head>
    <jsp:include page="../common/commonHead.jsp"/> 
    <meta content="width=device-width,user-scalable=no" name="viewport">
  	<style>
		#content{
			/*margin-left:100px;
			width:150px;
			height:250px;
			border:1px solid grey;*/
			width:100%;
			height:100%;
			overflow:hidden;
		}
		#paper{
			width:300px;
			height:470px;
		}
    </style>
  </head>
  <body ng-controller="PageCtrl" ng-init="loading=true" ng-swipe-left="nextPage()" ng-swipe-right="prevPage()">
     <div class="loadingForEdit" ng-if="loading==true">
	       <div class="wraper">
			      <div class="spinner">
					 <div class="double-bounce1"></div>
  					 <div class="double-bounce2"></div>
					 <div class="loadingText">loading......</div>
				  </div>
		  </div>
	 </div> 
     <div id="content" projectId="${projectId}">
	     <div id="paper">
               <div id="{{page.pageId}}"  style='width:100%;'>
               	   <img ng-src="{{page.backImg.src}}" ng-style="page.backImg.style"/>
                        <div ng-repeat="ele in page.eles" ng-style="ele.style" class="{{ele.entrance}}">
                            <img ng-if="ele.type=='img'" ng-src="{{ele.src}}" style="width:100%;height:100%;top:0px;left:0px;border-radius:{{ele.style.borderRadius}}px;"/>
                           <div index="{{$index}}" class="elements"></div>
                           {{ele.content}}
                        </div>
               </div>
	     </div>
	     
     </div>

     <!-- <button class="btn btn-danger" ng-click="prevPage()">上一页</button>
	 <button class="btn btn-success" ng-click="nextPage()">下一页</button> -->
      <jsp:include page="../common/commonScript.jsp"/>
	 <script>
          adapterForCanvas("paper","content");
          function adapterForCanvas(paperId,CanvasId){
              var paper = document.getElementById(paperId);
	          var Paperheight = paper.offsetHeight;
	          var Paperwidth =  paper.offsetWidth;
	          
	          var content = document.getElementById(CanvasId);

	          var ContentHeight = content.offsetHeight;
	          var ContentWidth = content.offsetWidth;
	          paper.style.webkitTransform = "scale("+ ContentWidth/Paperwidth  +","+ ContentHeight/Paperheight +")";

	          paper.style.margin = -1/2*(Paperheight-ContentHeight)+"px 0 0 "+ -1/2*(Paperwidth-ContentWidth) +"px";
          }
          $("div[kkk]").one("webkitAnimationEnd",function(){
              $(this).removeClass();
          });
	 </script>
  </body>
</html>

